<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- 引入vue@3框架文件 -->
  <script src="/libs/vue@3/vue.global.js"></script>

  <!-- 引入elementPlus组件库的样式 -->
  <link rel="stylesheet" href="/libs/elementPlus/css/index.css">
  <!-- 引入elementPlus组件库的脚本 -->
  <script src="/libs/elementPlus/js/index.full.js"></script>
  <!-- 引入axios请求库 -->
  <script src="/libs/axios/axios.min.js"></script>
  <title>内容管理系统</title>
</head>

<body>
  <div id="app">
    <!-- 使用elementPlus的表单组件 -->
    <el-form 
        :label-position="labelPosition" 
        label-width="100px"
        :model="ruleForm" 
        style="max-width: 460px">
      <!-- 收集任务标题 -->
      <el-form-item label="任务标题">
        <el-input v-model="ruleForm.task_title" />
      </el-form-item>
      <!-- 收集创建日期时间 required（必须填写 红星）-->
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker 
              v-model="ruleForm.date1" 
              type="date" 
              placeholder="请选择日期" 
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="time1">
            <el-time-picker 
            v-model="ruleForm.time1" 
            placeholder="请选择时间" 
            style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="addTaskFn">
          发布任务
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <script>
    // 后台地址
    const HOST_URL = 'http://127.0.0.1:3000'
    // 定义添加任务的方法 
    const addTaskFunc = (data)=> {
      return axios.get(`${HOST_URL}/tasks/add`,{params: data})
      .then(
         response => response.data 
      )
    }




    // 组件
    const App = {
      data() {
        return {
          labelPosition: 'right', // 控制label文本的水平对齐
          ruleForm: {// 表单信息
            task_title: '',
            date1: '',
            time1: '',
            task_create_time: '',
          }
        };
      },
      methods: {
        async addTaskFn () {
            // 执行axios
            // console.log(this.ruleForm.task_title);
            // console.log(this.ruleForm.date1);
            // console.log(this.ruleForm.time1);
            let {task_title , date1, time1} = this.ruleForm;
            let str =new Date(date1).toLocaleDateString()+" " + new Date(time1).toLocaleTimeString();
            console.log(str);
            await addTaskFunc({task_title , task_create_time: str})
            .then(
                // 后台响应的数据（响应报文）
                content=> {
                   console.log(content);

                  //  重置表单
                  this.ruleForm = {
                    task_title: '',
                    date1: '',
                    time1: ''
                  }
                }
            )
            .catch(
               err=> {
                console.log(err);
               }
            )
        }
      },
    };
    // 创建vue3的实例
    const app = Vue.createApp(App);
    // 使用elementPlus组件库
    app.use(ElementPlus);
    // 挂载点
    app.mount("#app");
  </script>
</body>